<template>
    <div>
        <el-form label-width="100px" :model="skuInfo">
            <el-form-item label="sup名称">
                {{spu.spuName}}
            </el-form-item>
            <el-form-item label="sku名称">
                <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格（元）">
                <el-input placeholder="价格（元）" type="number" v-model="skuInfo.price"></el-input>
            </el-form-item>
            <el-form-item label="重量（元）">
                <el-input placeholder="重量（元）" type="number" v-model="skuInfo.weight"></el-input>
            </el-form-item>
            <el-form-item label="规格描述">
                <el-input placeholder="规格描述" type="textarea" row="4" v-model="skuInfo.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label="平台属性">
                <el-form :inline="true" label-width="100px">
                    <el-form-item :label="attr.attrName" v-for="(attr,index) in attrList" :key="attr.id">
                        <el-select v-model="attr.attrIdValueId" placeholder="请选择">
                            <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" label-width="100px">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in spuSaleAttrList" :key="saleAttr.id">
                        <el-select v-model="saleAttr.saleAttrIdValueId" placeholder="请选择">
                            <el-option :label="saleAttrValue.saleAttrValueName" :value="`${saleAttr.id}:${saleAttrValue.id}`" v-for="(saleAttrValue,index) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="图片列表">
                <el-table
                    :data="spuImageList"
                    border
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        algin="center"
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        prop="prop"
                        label="图片"
                        width="width">
                        <template slot-scope="{row,$index}">
                            <img :src="row.imgUrl" alt="" style="width:80px;height:80px">
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="imgName"
                        label="名称"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="prop"
                        label="操作"
                        width="width">
                        <template slot-scope="{row, $index}">
                            <el-button @click="changeDefault(row,spuImageList)" v-if="row.isDefault==='0'" type="primary" size="mini">设为默认</el-button>
                            <el-tag v-else type="success">默认</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="warning" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'skuForm',
    data(){
        return{
            spu:{},
            attrList:[],
            spuSaleAttrList:[],
            spuImageList:[], //SPU图片列表
            //saleAttrValueId:'', //收集选中销售属性值的id
            //attrValueId:'', //收集平台属性值的Id
            skuImageList:[], //sku图片列表收集到skuInfo
            skuInfo:{
                //父组件传递的数据
                category3Id:'',
                spuId:'',
                tmId:'',
                //v-model收集
                price:'',
                weight:'',
                skuDesc:'',
                skuName:'',
                //发请求收集
                skuAttrValueList:[],
                skuDefaultImg:'',
                skuImageList:[],
                skuSaleAttrValueList:[]

            }
        }
    },
    methods:{
        //获取页面初始化
        async getAddSkuFormInitData(spu,category1Id,category2Id){
            this.spu = spu
            let promise1 = this.$API.attr.getList(category1Id,category2Id,spu.category3Id)
            let promise2 = this.$API.sku.getSpuSaleAttrList(spu.id)
            let promise3 = this.$API.sku.getSpuImageList(spu.id)
            const result = await Promise.all([promise1,promise2,promise3])
            this.attrList = result[0].data
            this.spuSaleAttrList = result[1].data

            let spuImageList = result[2].data
            spuImageList.forEach(item => item.isDefault = '0')
            this.spuImageList = spuImageList
        },
        //选择spu图片列表，收集sku的图片列表
        handleSelectionChange(val){
            this.skuImageList = val
        },
        //排他设置默认图片
        changeDefault(row,spuImageList){
            spuImageList.forEach(item=>item.isDefault = '0')
            row.isDefault = '1',
            this.skuInfo.skuDefaultImg = row.imgUrl
        },
        //清空数据
        resetData(){
            Object.assign(this._data,this.$options.data())
        },
        //点击保存
        async save(){
            //获取请求参数
            let {spu,attrList,spuSaleAttrList,skuImageList,skuInfo} = this
            //整理参数
            skuInfo.category3Id = spu.category3Id
            skuInfo.spuId = spu.id
            skuInfo.tmId = spu.tmId
            //整理图片列表
            skuInfo.skuImageList = skuImageList.map((item)=>{
                return {
                    imgName: item.imgName,
                    imgUrl: item.imgUrl,
                    isDefault: item.isDefault,
                    spuImgId: item.id
                }
            })
            //整理销售属性值列表和平台属性值列表
            // let arr = []
            // attrList.forEach(item=>{
            //     if(item.saleAttrIdValueId){
            //         let [attrId, valueId] = item.saleAttrIdValueId.split(':')
            //         let obj = {attrId,valueId}
            //         arr.push(obj)
            //     }
            // })
            // skuInfo.skuAttrValueList = arr
            //整理平台属性
            skuInfo.skuAttrValueList = attrList.reduce((prev,item)=>{
                if(item.attrIdValueId){
                    let [attrId,valueId] = item.attrIdValueId.split(':')
                    let obj = {attrId, valueId}
                    prev.push(obj)
                }
                return prev
            },[])
            //整理销售属性
            skuInfo.skuSaleAttrValueList = spuSaleAttrList.reduce((prev,item)=>{
                if(item.saleAttrIdValueId){
                    let[saleAttrId, saleAttrValueId] = item.saleAttrIdValueId.split(':')
                    let obj ={saleAttrId, saleAttrValueId}
                    prev.push(obj)
                }
                return prev
            },[])
            //发请求
            try { 
                const result = await this.$API.sku.addUpdate(skuInfo)
                if(result.code === 200 || result.code === 20000){
                    this.$message.success('保存sku成功')
                    this.$emit('update:isShowSkuForm',false)
                    //返回页面清空数据
                    this.resetData()
                }else{
                    this.$message.error('保存sku失败')
                }
            } catch (error) {
                this.$message.error('请求保存sku失败')
            }
        },
        //点击取消
        cancel(){
            this.$emit('update:isShowSkuForm',false)
            this.resetData()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
